<!-- 公共列表 -->
<template>
  <div class="public-list">
    <el-table
      :data="publicListData['body']"
      :border="isBorder"
      style="width: 100%"
      height="100%"
      :row-style="{ backgroundColor: 'rgba(0,0,0,0)', color: '#ededed' }"
      class="list-table"
      @row-click="myFun"
    >
      >
      <el-table-column
        v-for="(item, i) in publicListData['head1']"
        :key="i"
        :label="item['colV']"
      >
        <template slot-scope="scope">
          <!-- {{ scope.row[item.prop] }} -->
          <template v-if="item.colK == 'show_but' || item.colK == 'showBut'">
            <el-button
              size="mini"
              @click="handleToDeviceDetail(scope.row)"
              v-if="scope.row['show_but'] != ''"
              >详情</el-button
            >
            <span v-else>-</span>
          </template>
          <template v-else-if="item.colK == 'red'">
            <span style="color: red">{{ scope.row[item.colK] }}</span>
          </template>
          <template v-else>
            <span
              @click="showModal(scope, item)"
              class="td-span"
              :title="scope.row[item.colK]"
              >{{ scope.row[item.colK] }}</span
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      publicListData: {
        // 表头
        head: [
          { name: "表头1", prop: "p1" },
          { name: "表头2", prop: "p2" },
          { name: "表头3", prop: "p3" },
          { name: "表头4", prop: "p4" },
          { name: "表头5", prop: "p5" },
          { name: "表头6", prop: "p6" },
          { name: "操作", prop: "col" },
        ],
        //   表
        body: [
          {
            p1: "data1",
            p2: "data2",
            p3: "data3",
            p4: "data4",
            p5: "data5",
            p6: "data6",
            col: "详情",
          },
        ],
      },
      dialogVisible: false,
      gridData: [], // 弹出框数据
    };
  },
  // 接受参数
  props: {
    revListData: null,
    isBorder: null,
    method: Function,
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleToDeviceDetail(e) {
      // console.log(e);
      // return
      if (e["show_but"]) {
        console.log("you show_but");
      } else {
        return console.log("没有详情");
      }

      let params = {};
      if (e.type) {
        // console.log('有flag:' + e.type);
        params = { id: e.id, flag: e.type };
      } else {
        // console.log('没有flag');
        params = { id: e.id };
      }
      this.$router.push({
        name: e["show_but"],
        params,
      });
    },
    showModal(scope, item) {
      console.log("show modal");
      console.log(
        "第" + scope.$index + "行，" + item.prop + ": " + scope.row[item.prop]
      );
      // this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    myFun(row, column, event) {
      // console.log(row);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (
      JSON.stringify(this.revListData) == "{}" ||
      this.revListData == undefined ||
      this.revListData.length == 0
    ) {
      return console.log("没接收到列表数据");
    }
    console.log("this.revListData;");
    console.log(this.revListData);
    this.publicListData = this.revListData;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'>
//@import url(); 引入公共css类
.public-list {
  width: 100%;
  height: 100%;
  
  .list-table {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    // .el-table__body-wrapper.is-scrolling-none {
    //   // background-color: #ccc!important;
    //   height: 100%;
    //   .el-table__body {
    //     height: 100%;
    //     tbody {
    //       width: 100%;
    //       .el-table__row {
    //         height: 0.7rem!important;
    //       }
    //     }
    //   }
    // }
  }
}

//
/* 鼠标滑过高亮显示 */
.el-table tbody tr:hover > td {
  background-color: @ListHoverColor!important;
}

/* 修改表格头部背景 */
.el-table th {
  background: @ListHeadBgColor!important;
  color: @FontColor!important;
  height: 0.7rem;
}
.el-table th .cell {
  color: #fff;
  font-size: 0.2rem;
}
/* 修改表格行背景 */
// .el-table__body-wrapper {
//   height: 100%;
//   table {
//     height: 100%;
//     tbody {
//       height: 100%;
//       tr {
//         // height: 0.5rem;
//         // height: 10%!important;
//       }
//     }
//   }
// }
.el-table tr {
  background: @ListTrBgColor!important;
  height: 0.7rem!important;
  // height: 10%!important;
}
.el-table tr td {
  // height: 10%!important;
}
.el-table tr td .cell {
  // 
}
.el-table tr td .cell span {
  color: @FontBlue;
  font-size: 0.18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
}
.el-table tr:nth-child(odd) {
  background-color: @ListTrOddBgColor!important;
}

/* col */
.el-table_1_column_15 {
  text-align: center !important;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 0.18rem;
  height: 0.18rem;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: @Blue;
  border-radius: 0.1rem;
}

.el-input.el-input--prefix .el-input__inner {
  background-color: @BgColor!important;
  width: 4rem;
  height: 0.5rem;
  color: @FontColor;
  font-size: 0.24rem;
}

.has-gutter tr th {
  text-align: center !important;
  font-size: 0.16rem;
  // color: #3dd6fe !important;
  font-size: 0.2rem;
}

.el-table__row td {
  text-align: center !important;
  font-size: 0.18rem;
}

/* 详情按钮 */
.el-button.el-button--default.el-button--mini {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid #455aab;
}

// table边框颜色
// 右下
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  // background-color: #ccc;
  background-color: rgba(0, 0, 0, 0);
}
// 左上
.el-table--border,
.el-table--group {
  border-color: rgba(0, 0, 0, 0);
}
</style>